<script setup>
import { ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { getOrderListApi } from '@/apis/order'
import { route } from 'uview-plus'
// tab 栏选项
const list = ref([
  {
    name: '全部',
    orderStatus: 100
  },
  {
    name: '待付款',
    orderStatus: 0
  },
  {
    name: '待发货',
    orderStatus: 2
  },
  {
    name: '待收货',
    orderStatus: 3
  },
  {
    name: '已完成',
    orderStatus: 4
  },
  {
    name: '已取消',
    orderStatus: 200
  }
])

const current = ref(0)

const orderList = ref([])
const params = ref({
  pageNo: 1,
  pageSize: 10,
  orderStatus: 100
})
const pages = ref(0)
const getOrderList = async () => {
  const res = await getOrderListApi(params.value)
  orderList.value = orderList.value.concat(res.data.data.list)
  pages.value = res.data.data.pages
}

onShow(()=>{
  orderList.value = []
  getOrderList()
})



const change = (e) => {
  orderList.value = []
  params.value.orderStatus = e.orderStatus
  getOrderList()
}

// 去订单详情页
const toDetails = (orderNo) => {
  route({
    url: '/pages/order/orderDetails',
    params: {
      orderNo: orderNo
    }
  })
}


// 滚动加载更多
const onScrolltolower = () => {
  params.value.pageNo++
  if (pages.value < params.value.pageNo) return
  getOrderList()
}

</script>

<template>
  <view class="page">
    <view class="nav">
      <up-navbar :placeholder="true"  @leftClick="route({url: '/pages/user/index' , type: 'tab'})" border :safeAreaInsetTop="true"   title="我的订单" rightIcon="more-dot-fill">
      </up-navbar>
    </view>
    <view class="wrap">

      <up-sticky bgColor="#fff">
        <up-tabs flex activeColor="#f29100" lineColor="#5DB0B2" ref="tabs" :list="list" :current="current"
          @change="change" :is-scroll="false" swiperWidth="750" lineWidth="80rpx"
          :itemStyle="{ height: '80rpx', width: '90rpx', borderBottom: '1px solid #ccc' }"
          :activeStyle="{ color: '#5DB0B2' }"></up-tabs>
      </up-sticky>
      <view>
        <scroll-view :lower-threshold="100" class="scroll-Y" scroll-y @scrolltolower="onScrolltolower">
          <view class="scroll-view-item uni-bg-red" v-for="order in orderList " :key="order.id"
            @click="toDetails(order.orderNo)">
            <view class="header">
              <view>订单时间 {{ order.createTime }}</view>
              <view>
                <view v-if="order.orderStatus === 0" style="color: #FF7F50">待付款</view>
                <view v-else-if="order.orderStatus === 1" style="color: #32cd32">已付款</view>
                <view v-else-if="order.orderStatus === 2" style="color: #1e90ff">
                  待发货
                </view>
                <view v-if="order.orderStatus === 3" style="color: #ff69b4">已发货</view>
                <view v-if="order.orderStatus === 4" style="color: #8a2be2">交易成功</view>
                <view v-else-if="order.orderStatus === -1" style="color: #ea3322">
                  手动关闭
                </view>
                <view v-else-if="order.orderStatus === -2" style="color: #ea3322">
                  超时关闭
                </view>
                <view v-else-if="order.orderStatus === -3" style="color: #ea3322">
                  商家关闭
                </view>
              </view>
            </view>
            <view class="order-item" v-for="item in order.orderItemList" :key="item.id">
              <up-image :src="item.goodsImage" height="5rem" width="5rem"></up-image>
              <view class="right">
                <view class="title">
                  <up-text :lines="1" :text="item.goodsName"></up-text>
                </view>
                <view class="span">全场包邮</view>
                <view class="footer">
                  <view class="price">
                    <up-text mode="price" size="18" :text="item.sellingPrice"></up-text>
                  </view>
                  <view style="color: #57626F;">x{{ item.goodsCount }}</view>
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.scroll-Y {
  height: calc(100vh - 7.4rem);

  .scroll-view-item {
    padding: 20rpx 40rpx;
    background-color: #fff;
    border-bottom: 1px solid #ccc;

    &:last-child {
      border-bottom: none;
    }

    .header {
      display: flex;
      justify-content: space-between;
      font-size: .8rem;
      color: #57626F;
    }

    .order-item {
      display: flex;
      margin-top: 40rpx;

      &:last-child {
        margin-bottom: 40rpx;
      }

      .right {
        margin-left: 20rpx;
        flex: 1;
        display: flex;
        flex-direction: column;

        .span {
          flex: 1;
          color: #57626F;
        }

        .footer {
          display: flex;
          justify-content: space-between;

        }
      }
    }
  }
}
</style>